{extend name="public/container"}
{block name="head"}
<link href="{__FRAME_PATH}css/bootstrap.min.css" rel="stylesheet">
<link href="{__FRAME_PATH}css/font-awesome.min.css" rel="stylesheet">
<script src="{__FRAME_PATH}js/jquery.min.js"></script>
<style>
    .icons-box{  margin-top: 10px;}
    .list-inline li{width: 3rem;
        border: 1px solid #F7F4F4;
        text-align: center;
        height: 3rem;
        padding: 0.5rem;
        background-color: #FFFFFF;
        color: #0A0A0A;}
    .list-inline li:hover{
        color: #ff0000;
        border: 1px solid #ff0000;
    }
    .form-control{
        display: inline-block;
        width: 75%;
    }
</style>
{/block}

{block name="content"}
<div id="myApp" v-cloak>
    <div class="douxue-filter padding-10 mb-20 flex flex-between" style="margin-bottom:20px">
        <el-form :inline="true" :model="where" size="mini" class="flex">
            <div class="flex flex-between">
                <el-form-item>
                    <el-select size="small"  v-model="where.is_show" placeholder="请选择" :clearable=true>
                        <el-option label="显示" value="1">显示</el-option>
                        <el-option label="不显示" value="0">不显示</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" v-model="where.keyword" placeholder="请输入搜索关键字/规则ID/父级ID">
                        <el-button slot="append" size="small" type="primary" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>

        <el-button type="primary" size="mini" @click="doAdd()">新增权限</el-button>
    </div>
    <div class="padding-10">
        <el-table
            border
            stripe
            :data="rows"
            style="width: 100%"
            size="mini">
            <el-table-column
                prop="id"
                label="编号"
                width="80"
                align="left">
            </el-table-column>
            <el-table-column
                prop="menu_name"
                label="按钮名"
                width="160"
                align="left">
            </el-table-column>
            <el-table-column
                prop="p_menu_name"
                label="父级"
                align="left">
            </el-table-column>
            <el-table-column
                prop="module"
                label="模块名"
                width="200"
                align="left">
            </el-table-column>
            <el-table-column
                prop="controller"
                label="控制器名"
                width="140"
                align="left">
            </el-table-column>
            <el-table-column
                prop="action"
                label="方法名"
                width="150"
                cell-click="cell"
                align="left">
            </el-table-column>
            <el-table-column
                prop="is_show"
                label="是否菜单"
                width="120"
                cell-click="cell"
                align="left">
                <template slot-scope="scope" v-if="scope.row.is_show == 1">
                    <i class="el-icon-check" style="color: #0092DC;font-weight: bolder"></i>
                </template>
            </el-table-column>
            <el-table-column
                label=""
                width="90"
                align="left">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="doAdd(scope.row)" icon="el-icon-edit"></el-button>
                    <el-button size="mini" type="danger" @click="doDelete(scope.row.id)" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                small
                :hide-on-single-page="true"
                layout="prev, pager, next"
                :total="rowsCount"
                :page-size="where.limit"
                @current-change="doLoadRows">
            </el-pagination>
        </div>
    </div>

    <!-- 添加/编辑   -->
    <el-dialog title="添加/编辑" :visible.sync="dialogFormVisible" @close='closeDialog'>
        <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" >
            <el-form-item label="按钮名称" prop="menu_name">
                <el-input v-model="formData.menu_name" placeholder="按钮名称" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="父级id" prop="pid">
                <el-select v-model="formData.pid" :clearable=true placeholder="请选择" filterable>
                    <el-option v-for="item in menus" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模块名" prop="module">
                <el-input v-model="formData.module" placeholder="模块名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="控制器名" prop="controller">
                <el-input v-model="formData.controller" placeholder="控制器名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="方法名" prop="action">
                <el-input v-model="formData.action" placeholder="方法名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="参数" prop="params">
                <el-input v-model="formData.params" placeholder="参数,举例:a/123/b/234" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <el-input v-model="formData.icon" class="ivu-icon ivu-icon-ionic ivu-input-icon ivu-input-icon-normal" placeholder="请选择图标" autocomplete="off">
                    <el-button slot="append" size="small" type="primary" @click="getIcon">选择图标</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="formData.sort" placeholder="排序" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否菜单" prop="is_show">
                <template>
                    <el-radio-group v-model="formData.is_show">
                        <el-radio :label="0">隐藏</el-radio>
                        <el-radio :label="1">显示（菜单只显示三级）</el-radio>
                    </el-radio-group>
                </template>
            </el-form-item>
            <el-form-item>
                <template>
                    <el-button type="primary" @click="onSubmit('formData')">确 定</el-button>
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                </template>
            </el-form-item>
        </el-form>
        <el-dialog  title="请选择图标" :visible.sync="innerVisible" v-if="innerVisible" append-to-body>
            <template>
                <div>
                    <h5> v4.3.0新增图标 </h5>
                    <ul class="list-inline">
                        <li  title="bed"  @click="getIconClass"><i class="fa fa-bed"></i> </li>

                        <li  title="buysellads"  @click="getIconClass"><i class="fa fa-buysellads"></i> </li>

                        <li  title="cart-arrow-down"  @click="getIconClass"><i class="fa fa-cart-arrow-down"></i> </li>

                        <li  title="cart-plus"  @click="getIconClass"><i class="fa fa-cart-plus"></i> </li>

                        <li  title="connectdevelop"  @click="getIconClass"><i class="fa fa-connectdevelop"></i> </li>

                        <li  title="dashcube"  @click="getIconClass"><i class="fa fa-dashcube"></i> </li>

                        <li  title="diamond"  @click="getIconClass"><i class="fa fa-diamond"></i> </li>

                        <li  title="facebook-official"  @click="getIconClass"><i class="fa fa-facebook-official"></i> </li>

                        <li  title="forumbee"  @click="getIconClass"><i class="fa fa-forumbee"></i> </li>

                        <li  title="heartbeat"  @click="getIconClass"><i class="fa fa-heartbeat"></i> </li>

                        <li  title="hotel"  @click="getIconClass"><i class="fa fa-hotel"></i> </li>

                        <li  title="leanpub"  @click="getIconClass"><i class="fa fa-leanpub"></i> </li>

                        <li  title="mars"  @click="getIconClass"><i class="fa fa-mars"></i> </li>

                        <li  title="mars-double"  @click="getIconClass"><i class="fa fa-mars-double"></i> </li>

                        <li  title="mars-stroke"  @click="getIconClass"><i class="fa fa-mars-stroke"></i> </li>

                        <li  title="mars-stroke-h"  @click="getIconClass"><i class="fa fa-mars-stroke-h"></i> </li>

                        <li  title="mars-stroke-v"  @click="getIconClass"><i class="fa fa-mars-stroke-v"></i> </li>

                        <li  title="medium"  @click="getIconClass"><i class="fa fa-medium"></i> </li>

                        <li  title="mercury"  @click="getIconClass"><i class="fa fa-mercury"></i> </li>

                        <li  title="motorcycle"  @click="getIconClass"><i class="fa fa-motorcycle"></i> </li>

                        <li  title="neuter"  @click="getIconClass"><i class="fa fa-neuter"></i> </li>

                        <li  title="pinterest-p"  @click="getIconClass"><i class="fa fa-pinterest-p"></i> </li>

                        <li  title="sellsy"  @click="getIconClass"><i class="fa fa-sellsy"></i> </li>

                        <li  title="server"  @click="getIconClass"><i class="fa fa-server"></i> </li>

                        <li  title="ship"  @click="getIconClass"><i class="fa fa-ship"></i> </li>

                        <li  title="shirtsinbulk"  @click="getIconClass"><i class="fa fa-shirtsinbulk"></i> </li>

                        <li  title="simplybuilt"  @click="getIconClass"><i class="fa fa-simplybuilt"></i> </li>

                        <li  title="skyatlas"  @click="getIconClass"><i class="fa fa-skyatlas"></i> </li>

                        <li  title="street-view"  @click="getIconClass"><i class="fa fa-street-view"></i> </li>

                        <li  title="subway"  @click="getIconClass"><i class="fa fa-subway"></i> </li>

                        <li  title="train"  @click="getIconClass"><i class="fa fa-train"></i> </li>

                        <li  title="transgender"  @click="getIconClass"><i class="fa fa-transgender"></i> </li>

                        <li  title="transgender-alt"  @click="getIconClass"><i class="fa fa-transgender-alt"></i> </li>

                        <li  title="user-plus"  @click="getIconClass"><i class="fa fa-user-plus"></i> </li>

                        <li  title="user-secret"  @click="getIconClass"><i class="fa fa-user-secret"></i> </li>

                        <li  title="user-times"  @click="getIconClass"><i class="fa fa-user-times"></i> </li>

                        <li  title="venus"  @click="getIconClass"><i class="fa fa-venus"></i> </li>

                        <li  title="venus-double"  @click="getIconClass"><i class="fa fa-venus-double"></i> </li>

                        <li  title="venus-mars"  @click="getIconClass"><i class="fa fa-venus-mars"></i> </li>

                        <li  title="viacoin"  @click="getIconClass"><i class="fa fa-viacoin"></i> </li>

                        <li  title="whatsapp"  @click="getIconClass"><i class="fa fa-whatsapp"></i> </li>
                    </ul>


                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5> v4.2.0新增图标 </h5>
                    <ul class="list-inline">
                        <li title="angellist"  @click="getIconClass"><i class="fa fa-angellist"></i> </li>
                        <li title="area-chart"  @click="getIconClass"><i class="fa fa-area-chart"></i> </li>
                        <li title="at"  @click="getIconClass"><i class="fa fa-at"></i> </li>
                        <li title="bell-slash"  @click="getIconClass"><i class="fa fa-bell-slash"></i> </li>
                        <li title="bell-slash-o"  @click="getIconClass"><i class="fa fa-bell-slash-o"></i> </li>
                        <li title="bicycle"  @click="getIconClass"><i class="fa fa-bicycle"></i> </li>
                        <li title="binoculars"  @click="getIconClass"><i class="fa fa-binoculars"></i> </li>
                        <li title="birthday-cake"  @click="getIconClass"><i class="fa fa-birthday-cake"></i> </li>
                        <li title="bus"  @click="getIconClass"><i class="fa fa-bus"></i> </li>
                        <li title="calculator"  @click="getIconClass"><i class="fa fa-calculator"></i> </li>
                        <li title="cc"  @click="getIconClass"><i class="fa fa-cc"></i> </li>
                        <li title="cc-amex"  @click="getIconClass"><i class="fa fa-cc-amex"></i> </li>
                        <li title="cc-discover"  @click="getIconClass"><i class="fa fa-cc-discover"></i> </li>
                        <li title="cc-mastercard"  @click="getIconClass"><i class="fa fa-cc-mastercard"></i> </li>
                        <li title="cc-paypal"  @click="getIconClass"><i class="fa fa-cc-paypal"></i> </li>
                        <li title="cc-stripe"  @click="getIconClass"><i class="fa fa-cc-stripe"></i> </li>
                        <li title="cc-visa"  @click="getIconClass"><i class="fa fa-cc-visa"></i> </li>
                        <li title="copyright"  @click="getIconClass"><i class="fa fa-copyright"></i> </li>
                        <li title="eyedropper"  @click="getIconClass"><i class="fa fa-eyedropper"></i> </li>
                        <li title="futbol-o"  @click="getIconClass"><i class="fa fa-futbol-o"></i> </li>
                        <li title="google-wallet"  @click="getIconClass"><i class="fa fa-google-wallet"></i> </li>
                        <li title="ils"  @click="getIconClass"><i class="fa fa-ils"></i> </li>
                        <li title="ioxhost"  @click="getIconClass"><i class="fa fa-ioxhost"></i> </li>
                        <li title="lastfm"  @click="getIconClass"><i class="fa fa-lastfm"></i> </li>
                        <li title="lastfm-square"  @click="getIconClass"><i class="fa fa-lastfm-square"></i> </li>
                        <li title="line-chart"  @click="getIconClass"><i class="fa fa-line-chart"></i> </li>
                        <li title="meanpath"  @click="getIconClass"><i class="fa fa-meanpath"></i> </li>
                        <li title="newspaper-o"  @click="getIconClass"><i class="fa fa-newspaper-o"></i> </li>
                        <li title="paint-brush"  @click="getIconClass"><i class="fa fa-paint-brush"></i> </li>
                        <li title="paypal"  @click="getIconClass"><i class="fa fa-paypal"></i> </li>
                        <li title="pie-chart"  @click="getIconClass"><i class="fa fa-pie-chart"></i> </li>
                        <li title="plug"  @click="getIconClass"><i class="fa fa-plug"></i> </li>
                        <li title="shekel"  @click="getIconClass"><i class="fa fa-shekel"></i> </li>
                        <li title="sheqel"  @click="getIconClass"><i class="fa fa-sheqel"></i> </li>
                        <li title="slideshare"  @click="getIconClass"><i class="fa fa-slideshare"></i> </li>
                        <li title="soccer-ball-o"  @click="getIconClass"><i class="fa fa-soccer-ball-o"></i> </li>
                        <li title="toggle-off"  @click="getIconClass"><i class="fa fa-toggle-off"></i> </li>
                        <li title="toggle-on"  @click="getIconClass"><i class="fa fa-toggle-on"></i> </li>
                        <li title="trash"  @click="getIconClass"><i class="fa fa-trash"></i> </li>
                        <li title="tty"  @click="getIconClass"><i class="fa fa-tty"></i> </li>
                        <li title="twitch"  @click="getIconClass"><i class="fa fa-twitch"></i> </li>
                        <li title="wifi"  @click="getIconClass"><i class="fa fa-wifi"></i> </li>
                        <li title="yelp"  @click="getIconClass"><i class="fa fa-yelp"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5> v4.1.0新增图标 </h5>
                    <ul class="list-inline">
                        <li  title="rub"  @click="getIconClass"><i class="fa fa-rub"></i> </li>
                        <li  title="ruble"  @click="getIconClass"><i class="fa fa-ruble"></i> </li>
                        <li  title="rouble"  @click="getIconClass"><i class="fa fa-rouble"></i> </li>
                        <li  title="pagelines"  @click="getIconClass"><i class="fa fa-pagelines"></i> </li>
                        <li  title="stack-exchange"  @click="getIconClass"><i class="fa fa-stack-exchange"></i> </li>
                        <li  title="arrow-circle-o-right"  @click="getIconClass"><i class="fa fa-arrow-circle-o-right"></i> </li>
                        <li  title="arrow-circle-o-left"  @click="getIconClass"><i class="fa fa-arrow-circle-o-left"></i> </li>
                        <li  title="caret-square-o-left"  @click="getIconClass"><i class="fa fa-caret-square-o-left"></i> </li>
                        <li  title="toggle-left"  @click="getIconClass"><i class="fa fa-toggle-left"></i> </li>
                        <li  title="dot-circle-o"  @click="getIconClass"><i class="fa fa-dot-circle-o"></i> </li>
                        <li  title="wheelchair"  @click="getIconClass"><i class="fa fa-wheelchair"></i> </li>
                        <li  title="vimeo-square"  @click="getIconClass"><i class="fa fa-vimeo-square"></i> </li>
                        <li  title="try"  @click="getIconClass"><i class="fa fa-try"></i> </li>
                        <li  title="turkish-lira"  @click="getIconClass"><i class="fa fa-turkish-lira"></i> </li>
                        <li  title="plus-square-o"  @click="getIconClass"><i class="fa fa-plus-square-o"></i> </li>


                        <li  title="automobile"  @click="getIconClass"><i class="fa fa-automobile"></i> </li>
                        <li  title="bank"  @click="getIconClass"><i class="fa fa-bank"></i> </li>
                        <li  title="behance"  @click="getIconClass"><i class="fa fa-behance"></i> </li>
                        <li  title="behance-square"  @click="getIconClass"><i class="fa fa-behance-square"></i> </li>
                        <li  title="bomb"  @click="getIconClass"><i class="fa fa-bomb"></i> </li>
                        <li  title="building"  @click="getIconClass"><i class="fa fa-building"></i> </li>
                        <li  title="cab"  @click="getIconClass"><i class="fa fa-cab"></i> </li>
                        <li  title="car"  @click="getIconClass"><i class="fa fa-car"></i> </li>
                        <li  title="child"  @click="getIconClass"><i class="fa fa-child"></i> </li>
                        <li  title="circle-o-notch"  @click="getIconClass"><i class="fa fa-circle-o-notch"></i> </li>
                        <li  title="circle-thin"  @click="getIconClass"><i class="fa fa-circle-thin"></i> </li>
                        <li  title="codepen"  @click="getIconClass"><i class="fa fa-codepen"></i> </li>
                        <li  title="cube"  @click="getIconClass"><i class="fa fa-cube"></i> </li>
                        <li  title="cubes"  @click="getIconClass"><i class="fa fa-cubes"></i> </li>
                        <li  title="database"  @click="getIconClass"><i class="fa fa-database"></i> </li>
                        <li  title="delicious"  @click="getIconClass"><i class="fa fa-delicious"></i> </li>
                        <li  title="deviantart"  @click="getIconClass"><i class="fa fa-deviantart"></i> </li>
                        <li  title="digg"  @click="getIconClass"><i class="fa fa-digg"></i> </li>
                        <li  title="drupal"  @click="getIconClass"><i class="fa fa-drupal"></i> </li>
                        <li  title="empire"  @click="getIconClass"><i class="fa fa-empire"></i> </li>
                        <li  title="envelope-square"  @click="getIconClass"><i class="fa fa-envelope-square"></i> </li>
                        <li  title="fax"  @click="getIconClass"><i class="fa fa-fax"></i> </li>
                        <li  title="file-archive-o"  @click="getIconClass"><i class="fa fa-file-archive-o"></i> </li>
                        <li  title="file-audio-o"  @click="getIconClass"><i class="fa fa-file-audio-o"></i> </li>
                        <li  title="file-code-o"  @click="getIconClass"><i class="fa fa-file-code-o"></i> </li>
                        <li  title="file-excel-o"  @click="getIconClass"><i class="fa fa-file-excel-o"></i> </li>
                        <li  title="file-image-o"  @click="getIconClass"><i class="fa fa-file-image-o"></i> </li>
                        <li  title="file-movie-o"  @click="getIconClass"><i class="fa fa-file-movie-o"></i> </li>
                        <li  title="file-pdf-o"  @click="getIconClass"><i class="fa fa-file-pdf-o"></i> </li>
                        <li  title="file-photo-o"  @click="getIconClass"><i class="fa fa-file-photo-o"></i> </li>
                        <li  title="file-picture-o"  @click="getIconClass"><i class="fa fa-file-picture-o"></i> </li>
                        <li  title="file-powerpoint-o"  @click="getIconClass"><i class="fa fa-file-powerpoint-o"></i> </li>
                        <li  title="file-sound-o"  @click="getIconClass"><i class="fa fa-file-sound-o"></i> </li>
                        <li  title="file-video-o"  @click="getIconClass"><i class="fa fa-file-video-o"></i> </li>
                        <li  title="file-word-o"  @click="getIconClass"><i class="fa fa-file-word-o"></i> </li>
                        <li  title="file-zip-o"  @click="getIconClass"><i class="fa fa-file-zip-o"></i> </li>
                        <li  title="ge"  @click="getIconClass"><i class="fa fa-ge"></i> </li>
                        <li  title="git"  @click="getIconClass"><i class="fa fa-git"></i> </li>
                        <li  title="git-square"  @click="getIconClass"><i class="fa fa-git-square"></i> </li>
                        <li  title="google"  @click="getIconClass"><i class="fa fa-google"></i> </li>
                        <li  title="graduation-cap"  @click="getIconClass"><i class="fa fa-graduation-cap"></i> </li>
                        <li  title="hacker-news"  @click="getIconClass"><i class="fa fa-hacker-news"></i> </li>
                        <li  title="header"  @click="getIconClass"><i class="fa fa-header"></i> </li>
                        <li  title="history"  @click="getIconClass"><i class="fa fa-history"></i> </li>
                        <li  title="institution"  @click="getIconClass"><i class="fa fa-institution"></i> </li>
                        <li  title="joomla"  @click="getIconClass"><i class="fa fa-joomla"></i> </li>
                        <li  title="jsfiddle"  @click="getIconClass"><i class="fa fa-jsfiddle"></i> </li>
                        <li  title="language"  @click="getIconClass"><i class="fa fa-language"></i> </li>
                        <li  title="life-bouy"  @click="getIconClass"><i class="fa fa-life-bouy"></i> </li>
                        <li  title="life-ring"  @click="getIconClass"><i class="fa fa-life-ring"></i> </li>
                        <li  title="life-saver"  @click="getIconClass"><i class="fa fa-life-saver"></i> </li>
                        <li  title="mortar-board"  @click="getIconClass"><i class="fa fa-mortar-board"></i> </li>
                        <li  title="openid"  @click="getIconClass"><i class="fa fa-openid"></i> </li>
                        <li  title="paper-plane"  @click="getIconClass"><i class="fa fa-paper-plane"></i> </li>
                        <li  title="paper-plane-o"  @click="getIconClass"><i class="fa fa-paper-plane-o"></i> </li>
                        <li  title="paragraph"  @click="getIconClass"><i class="fa fa-paragraph"></i> </li>
                        <li  title="paw"  @click="getIconClass"><i class="fa fa-paw"></i> </li>
                        <li  title="pied-piper"  @click="getIconClass"><i class="fa fa-pied-piper"></i> </li>
                        <li  title="pied-piper-alt"  @click="getIconClass"><i class="fa fa-pied-piper-alt"></i> </li>
                        <li  title="pied-piper-square"  @click="getIconClass"><i class="fa fa-pied-piper-square"></i> </li>
                        <li  title="qq"  @click="getIconClass"><i class="fa fa-qq"></i> </li>
                        <li  title="ra"  @click="getIconClass"><i class="fa fa-ra"></i> </li>
                        <li  title="rebel"  @click="getIconClass"><i class="fa fa-rebel"></i> </li>
                        <li  title="recycle"  @click="getIconClass"><i class="fa fa-recycle"></i> </li>
                        <li  title="reddit"  @click="getIconClass"><i class="fa fa-reddit"></i> </li>
                        <li  title="reddit-square"  @click="getIconClass"><i class="fa fa-reddit-square"></i> </li>
                        <li  title="send"  @click="getIconClass"><i class="fa fa-send"></i> </li>
                        <li  title="send-o"  @click="getIconClass"><i class="fa fa-send-o"></i> </li>
                        <li  title="share-alt"  @click="getIconClass"><i class="fa fa-share-alt"></i> </li>
                        <li  title="share-alt-square"  @click="getIconClass"><i class="fa fa-share-alt-square"></i> </li>
                        <li  title="slack"  @click="getIconClass"><i class="fa fa-slack"></i> </li>
                        <li  title="sliders"  @click="getIconClass"><i class="fa fa-sliders"></i> </li>
                        <li  title="soundcloud"  @click="getIconClass"><i class="fa fa-soundcloud"></i> </li>
                        <li  title="space-shuttle"  @click="getIconClass"><i class="fa fa-space-shuttle"></i> </li>
                        <li  title="spoon"  @click="getIconClass"><i class="fa fa-spoon"></i> </li>
                        <li  title="spotify"  @click="getIconClass"><i class="fa fa-spotify"></i> </li>
                        <li  title="steam"  @click="getIconClass"><i class="fa fa-steam"></i> </li>
                        <li  title="steam-square"  @click="getIconClass"><i class="fa fa-steam-square"></i> </li>
                        <li  title="stumbleupon"  @click="getIconClass"><i class="fa fa-stumbleupon"></i> </li>
                        <li  title="stumbleupon-circle"  @click="getIconClass"><i class="fa fa-stumbleupon-circle"></i> </li>
                        <li  title="support"  @click="getIconClass"><i class="fa fa-support"></i> </li>
                        <li  title="taxi"  @click="getIconClass"><i class="fa fa-taxi"></i> </li>
                        <li  title="tencent-weibo"  @click="getIconClass"><i class="fa fa-tencent-weibo"></i> </li>
                        <li  title="tree"  @click="getIconClass"><i class="fa fa-tree"></i> </li>
                        <li  title="university"  @click="getIconClass"><i class="fa fa-university"></i> </li>
                        <li  title="vine"  @click="getIconClass"><i class="fa fa-vine"></i> </li>
                        <li  title="wechat"  @click="getIconClass"><i class="fa fa-wechat"></i> </li>
                        <li  title="weixin"  @click="getIconClass"><i class="fa fa-weixin"></i> </li>
                        <li  title="wordpress"  @click="getIconClass"><i class="fa fa-wordpress"></i> </li>
                        <li  title="yahoo"  @click="getIconClass"><i class="fa fa-yahoo"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5>Web应用程序图标</h5>
                    <ul class="list-inline">
                        <li  title="adjust"  @click="getIconClass"><i class="fa fa-adjust"></i> </li>
                        <li  title="anchor"  @click="getIconClass"><i class="fa fa-anchor"></i> </li>
                        <li  title="archive"  @click="getIconClass"><i class="fa fa-archive"></i> </li>
                        <li  title="arrows"  @click="getIconClass"><i class="fa fa-arrows"></i> </li>
                        <li  title="arrows-h"  @click="getIconClass"><i class="fa fa-arrows-h"></i> </li>
                        <li  title="arrows-v"  @click="getIconClass"><i class="fa fa-arrows-v"></i> </li>
                        <li  title="asterisk"  @click="getIconClass"><i class="fa fa-asterisk"></i> </li>
                        <li  title="ban"  @click="getIconClass"><i class="fa fa-ban"></i> </li>
                        <li  title="bar-chart-o"  @click="getIconClass"><i class="fa fa-bar-chart-o"></i> </li>
                        <li  title="barcode"  @click="getIconClass"><i class="fa fa-barcode"></i> </li>
                        <li  title="bars"  @click="getIconClass"><i class="fa fa-bars"></i> </li>
                        <li  title="beer"  @click="getIconClass"><i class="fa fa-beer"></i> </li>
                        <li  title="bell"  @click="getIconClass"><i class="fa fa-bell"></i> </li>
                        <li  title="bell-o"  @click="getIconClass"><i class="fa fa-bell-o"></i> </li>
                        <li  title="bolt"  @click="getIconClass"><i class="fa fa-bolt"></i> </li>
                        <li  title="book"  @click="getIconClass"><i class="fa fa-book"></i> </li>
                        <li  title="bookmark"  @click="getIconClass"><i class="fa fa-bookmark"></i> </li>
                        <li  title="bookmark-o"  @click="getIconClass"><i class="fa fa-bookmark-o"></i> </li>
                        <li  title="briefcase"  @click="getIconClass"><i class="fa fa-briefcase"></i> </li>
                        <li  title="bug"  @click="getIconClass"><i class="fa fa-bug"></i> </li>
                        <li  title="building-o"  @click="getIconClass"><i class="fa fa-building-o"></i> </li>
                        <li  title="bullhorn"  @click="getIconClass"><i class="fa fa-bullhorn"></i> </li>
                        <li  title="bullseye"  @click="getIconClass"><i class="fa fa-bullseye"></i> </li>
                        <li  title="calendar"  @click="getIconClass"><i class="fa fa-calendar"></i> </li>
                        <li  title="calendar-o"  @click="getIconClass"><i class="fa fa-calendar-o"></i> </li>
                        <li  title="camera"  @click="getIconClass"><i class="fa fa-camera"></i> </li>
                        <li  title="camera-retro"  @click="getIconClass"><i class="fa fa-camera-retro"></i> </li>
                        <li  title="caret-square-o-down"  @click="getIconClass"><i class="fa fa-caret-square-o-down"></i> </li>
                        <li  title="caret-square-o-left"  @click="getIconClass"><i class="fa fa-caret-square-o-left"></i> </li>
                        <li  title="caret-square-o-right"  @click="getIconClass"><i class="fa fa-caret-square-o-right"></i> </li>
                        <li  title="caret-square-o-up"  @click="getIconClass"><i class="fa fa-caret-square-o-up"></i> </li>
                        <li  title="certificate"  @click="getIconClass"><i class="fa fa-certificate"></i> </li>
                        <li  title="check"  @click="getIconClass"><i class="fa fa-check"></i> </li>
                        <li  title="check-circle"  @click="getIconClass"><i class="fa fa-check-circle"></i> </li>
                        <li  title="check-circle-o"  @click="getIconClass"><i class="fa fa-check-circle-o"></i> </li>
                        <li  title="check-square"  @click="getIconClass"><i class="fa fa-check-square"></i> </li>
                        <li  title="check-square-o"  @click="getIconClass"><i class="fa fa-check-square-o"></i> </li>
                        <li  title="circle"  @click="getIconClass"><i class="fa fa-circle"></i> </li>
                        <li  title="circle-o"  @click="getIconClass"><i class="fa fa-circle-o"></i> </li>
                        <li  title="clock-o"  @click="getIconClass"><i class="fa fa-clock-o"></i> </li>
                        <li  title="cloud"  @click="getIconClass"><i class="fa fa-cloud"></i> </li>
                        <li  title="cloud-download"  @click="getIconClass"><i class="fa fa-cloud-download"></i> </li>
                        <li  title="cloud-upload"  @click="getIconClass"><i class="fa fa-cloud-upload"></i> </li>
                        <li  title="code"  @click="getIconClass"><i class="fa fa-code"></i> </li>
                        <li  title="code-fork"  @click="getIconClass"><i class="fa fa-code-fork"></i> </li>
                        <li  title="coffee"  @click="getIconClass"><i class="fa fa-coffee"></i> </li>
                        <li  title="cog"  @click="getIconClass"><i class="fa fa-cog"></i> </li>
                        <li  title="cogs"  @click="getIconClass"><i class="fa fa-cogs"></i> </li>
                        <li  title="comment"  @click="getIconClass"><i class="fa fa-comment"></i> </li>
                        <li  title="comment-o"  @click="getIconClass"><i class="fa fa-comment-o"></i> </li>
                        <li  title="comments"  @click="getIconClass"><i class="fa fa-comments"></i> </li>
                        <li  title="comments-o"  @click="getIconClass"><i class="fa fa-comments-o"></i> </li>
                        <li  title="compass"  @click="getIconClass"><i class="fa fa-compass"></i> </li>
                        <li  title="credit-card"  @click="getIconClass"><i class="fa fa-credit-card"></i> </li>
                        <li  title="crop"  @click="getIconClass"><i class="fa fa-crop"></i> </li>
                        <li  title="crosshairs"  @click="getIconClass"><i class="fa fa-crosshairs"></i> </li>
                        <li  title="cutlery"  @click="getIconClass"><i class="fa fa-cutlery"></i> </li>
                        <li  title="dashboard"  @click="getIconClass"><i class="fa fa-dashboard"></i> </li>
                        <li  title="desktop"  @click="getIconClass"><i class="fa fa-desktop"></i> </li>
                        <li  title="dot-circle-o"  @click="getIconClass"><i class="fa fa-dot-circle-o"></i> </li>
                        <li  title="download"  @click="getIconClass"><i class="fa fa-download"></i> </li>
                        <li  title="edit"  @click="getIconClass"><i class="fa fa-edit"></i> </li>
                        <li  title="ellipsis-h"  @click="getIconClass"><i class="fa fa-ellipsis-h"></i> </li>
                        <li  title="ellipsis-v"  @click="getIconClass"><i class="fa fa-ellipsis-v"></i> </li>
                        <li  title="envelope"  @click="getIconClass"><i class="fa fa-envelope"></i> </li>
                        <li  title="envelope-o"  @click="getIconClass"><i class="fa fa-envelope-o"></i> </li>
                        <li  title="eraser"  @click="getIconClass"><i class="fa fa-eraser"></i> </li>
                        <li  title="exchange"  @click="getIconClass"><i class="fa fa-exchange"></i> </li>
                        <li  title="exclamation"  @click="getIconClass"><i class="fa fa-exclamation"></i> </li>
                        <li  title="exclamation-circle"  @click="getIconClass"><i class="fa fa-exclamation-circle"></i> </li>
                        <li  title="exclamation-triangle"  @click="getIconClass"><i class="fa fa-exclamation-triangle"></i> </li>
                        <li  title="external-link"  @click="getIconClass"><i class="fa fa-external-link"></i> </li>
                        <li  title="external-link-square"  @click="getIconClass"><i class="fa fa-external-link-square"></i> </li>
                        <li  title="eye"  @click="getIconClass"><i class="fa fa-eye"></i> </li>
                        <li  title="eye-slash"  @click="getIconClass"><i class="fa fa-eye-slash"></i> </li>
                        <li  title="female"  @click="getIconClass"><i class="fa fa-female"></i> </li>
                        <li  title="fighter-jet"  @click="getIconClass"><i class="fa fa-fighter-jet"></i> </li>
                        <li  title="film"  @click="getIconClass"><i class="fa fa-film"></i> </li>
                        <li  title="filter"  @click="getIconClass"><i class="fa fa-filter"></i> </li>
                        <li  title="fire"  @click="getIconClass"><i class="fa fa-fire"></i> </li>
                        <li  title="fire-extinguisher"  @click="getIconClass"><i class="fa fa-fire-extinguisher"></i> </li>
                        <li  title="flag"  @click="getIconClass"><i class="fa fa-flag"></i> </li>
                        <li  title="flag-checkered"  @click="getIconClass"><i class="fa fa-flag-checkered"></i> </li>
                        <li  title="flag-o"  @click="getIconClass"><i class="fa fa-flag-o"></i> </li>
                        <li  title="flash"  @click="getIconClass"><i class="fa fa-flash"></i> </li>
                        <li  title="flask"  @click="getIconClass"><i class="fa fa-flask"></i> </li>
                        <li  title="folder"  @click="getIconClass"><i class="fa fa-folder"></i> </li>
                        <li  title="folder-o"  @click="getIconClass"><i class="fa fa-folder-o"></i> </li>
                        <li  title="folder-open"  @click="getIconClass"><i class="fa fa-folder-open"></i> </li>
                        <li  title="folder-open-o"  @click="getIconClass"><i class="fa fa-folder-open-o"></i> </li>
                        <li  title="frown-o"  @click="getIconClass"><i class="fa fa-frown-o"></i> </li>
                        <li  title="gamepad"  @click="getIconClass"><i class="fa fa-gamepad"></i> </li>
                        <li  title="gavel"  @click="getIconClass"><i class="fa fa-gavel"></i> </li>
                        <li  title="gear"  @click="getIconClass"><i class="fa fa-gear"></i> </li>
                        <li  title="gears"  @click="getIconClass"><i class="fa fa-gears"></i> </li>
                        <li  title="gift"  @click="getIconClass"><i class="fa fa-gift"></i> </li>
                        <li  title="glass"  @click="getIconClass"><i class="fa fa-glass"></i> </li>
                        <li  title="globe"  @click="getIconClass"><i class="fa fa-globe"></i> </li>
                        <li  title="group"  @click="getIconClass"><i class="fa fa-group"></i> </li>
                        <li  title="hdd-o"  @click="getIconClass"><i class="fa fa-hdd-o"></i> </li>
                        <li  title="headphones"  @click="getIconClass"><i class="fa fa-headphones"></i> </li>
                        <li  title="heart"  @click="getIconClass"><i class="fa fa-heart"></i> </li>
                        <li  title="heart-o"  @click="getIconClass"><i class="fa fa-heart-o"></i> </li>
                        <li  title="home"  @click="getIconClass"><i class="fa fa-home"></i> </li>
                        <li  title="inbox"  @click="getIconClass"><i class="fa fa-inbox"></i> </li>
                        <li  title="info"  @click="getIconClass"><i class="fa fa-info"></i> </li>
                        <li  title="info-circle"  @click="getIconClass"><i class="fa fa-info-circle"></i> </li>
                        <li  title="key"  @click="getIconClass"><i class="fa fa-key"></i> </li>
                        <li  title="keyboard-o"  @click="getIconClass"><i class="fa fa-keyboard-o"></i> </li>
                        <li  title="laptop"  @click="getIconClass"><i class="fa fa-laptop"></i> </li>
                        <li  title="leaf"  @click="getIconClass"><i class="fa fa-leaf"></i> </li>
                        <li  title="legal"  @click="getIconClass"><i class="fa fa-legal"></i> </li>
                        <li  title="lemon-o"  @click="getIconClass"><i class="fa fa-lemon-o"></i> </li>
                        <li  title="level-down"  @click="getIconClass"><i class="fa fa-level-down"></i> </li>
                        <li  title="level-up"  @click="getIconClass"><i class="fa fa-level-up"></i> </li>
                        <li  title="lightbulb-o"  @click="getIconClass"><i class="fa fa-lightbulb-o"></i> </li>
                        <li  title="location-arrow"  @click="getIconClass"><i class="fa fa-location-arrow"></i> </li>
                        <li  title="lock"  @click="getIconClass"><i class="fa fa-lock"></i> </li>
                        <li  title="magic"  @click="getIconClass"><i class="fa fa-magic"></i> </li>
                        <li  title="magnet"  @click="getIconClass"><i class="fa fa-magnet"></i> </li>
                        <li  title="mail-forward"  @click="getIconClass"><i class="fa fa-mail-forward"></i> </li>
                        <li  title="mail-reply"  @click="getIconClass"><i class="fa fa-mail-reply"></i> </li>
                        <li  title="mail-reply-all"  @click="getIconClass"><i class="fa fa-mail-reply-all"></i> </li>
                        <li  title="male"  @click="getIconClass"><i class="fa fa-male"></i> </li>
                        <li  title="map-marker"  @click="getIconClass"><i class="fa fa-map-marker"></i> </li>
                        <li  title="meh-o"  @click="getIconClass"><i class="fa fa-meh-o"></i> </li>
                        <li  title="microphone"  @click="getIconClass"><i class="fa fa-microphone"></i> </li>
                        <li  title="microphone-slash"  @click="getIconClass"><i class="fa fa-microphone-slash"></i> </li>
                        <li  title="minus"  @click="getIconClass"><i class="fa fa-minus"></i> </li>
                        <li  title="minus-circle"  @click="getIconClass"><i class="fa fa-minus-circle"></i> </li>
                        <li  title="minus-square"  @click="getIconClass"><i class="fa fa-minus-square"></i> </li>
                        <li  title="minus-square-o"  @click="getIconClass"><i class="fa fa-minus-square-o"></i> </li>
                        <li  title="mobile"  @click="getIconClass"><i class="fa fa-mobile"></i> </li>
                        <li  title="mobile-phone"  @click="getIconClass"><i class="fa fa-mobile-phone"></i> </li>
                        <li  title="money"  @click="getIconClass"><i class="fa fa-money"></i> </li>
                        <li  title="moon-o"  @click="getIconClass"><i class="fa fa-moon-o"></i> </li>
                        <li  title="music"  @click="getIconClass"><i class="fa fa-music"></i> </li>
                        <li  title="pencil"  @click="getIconClass"><i class="fa fa-pencil"></i> </li>
                        <li  title="pencil-square"  @click="getIconClass"><i class="fa fa-pencil-square"></i> </li>
                        <li  title="pencil-square-o"  @click="getIconClass"><i class="fa fa-pencil-square-o"></i> </li>
                        <li  title="phone"  @click="getIconClass"><i class="fa fa-phone"></i> </li>
                        <li  title="phone-square"  @click="getIconClass"><i class="fa fa-phone-square"></i> </li>
                        <li  title="picture-o"  @click="getIconClass"><i class="fa fa-picture-o"></i> </li>
                        <li  title="plane"  @click="getIconClass"><i class="fa fa-plane"></i> </li>
                        <li  title="plus"  @click="getIconClass"><i class="fa fa-plus"></i> </li>
                        <li  title="plus-circle"  @click="getIconClass"><i class="fa fa-plus-circle"></i> </li>
                        <li  title="plus-square"  @click="getIconClass"><i class="fa fa-plus-square"></i> </li>
                        <li  title="plus-square-o"  @click="getIconClass"><i class="fa fa-plus-square-o"></i> </li>
                        <li  title="power-off"  @click="getIconClass"><i class="fa fa-power-off"></i> </li>
                        <li  title="print"  @click="getIconClass"><i class="fa fa-print"></i> </li>
                        <li  title="puzzle-piece"  @click="getIconClass"><i class="fa fa-puzzle-piece"></i> </li>
                        <li  title="qrcode"  @click="getIconClass"><i class="fa fa-qrcode"></i> </li>
                        <li  title="question"  @click="getIconClass"><i class="fa fa-question"></i> </li>
                        <li  title="question-circle"  @click="getIconClass"><i class="fa fa-question-circle"></i> </li>
                        <li  title="quote-left"  @click="getIconClass"><i class="fa fa-quote-left"></i> </li>
                        <li  title="quote-right"  @click="getIconClass"><i class="fa fa-quote-right"></i> </li>
                        <li  title="random"  @click="getIconClass"><i class="fa fa-random"></i> </li>
                        <li  title="refresh"  @click="getIconClass"><i class="fa fa-refresh"></i> </li>
                        <li  title="reply"  @click="getIconClass"><i class="fa fa-reply"></i> </li>
                        <li  title="reply-all"  @click="getIconClass"><i class="fa fa-reply-all"></i> </li>
                        <li  title="retweet"  @click="getIconClass"><i class="fa fa-retweet"></i> </li>
                        <li  title="road"  @click="getIconClass"><i class="fa fa-road"></i> </li>
                        <li  title="rocket"  @click="getIconClass"><i class="fa fa-rocket"></i> </li>
                        <li  title="rss"  @click="getIconClass"><i class="fa fa-rss"></i> </li>
                        <li  title="rss-square"  @click="getIconClass"><i class="fa fa-rss-square"></i> </li>
                        <li  title="search"  @click="getIconClass"><i class="fa fa-search"></i> </li>
                        <li  title="search-minus"  @click="getIconClass"><i class="fa fa-search-minus"></i> </li>
                        <li  title="search-plus"  @click="getIconClass"><i class="fa fa-search-plus"></i> </li>
                        <li  title="share"  @click="getIconClass"><i class="fa fa-share"></i> </li>
                        <li  title="share-square"  @click="getIconClass"><i class="fa fa-share-square"></i> </li>
                        <li  title="share-square-o"  @click="getIconClass"><i class="fa fa-share-square-o"></i> </li>
                        <li  title="shield"  @click="getIconClass"><i class="fa fa-shield"></i> </li>
                        <li  title="shopping-cart"  @click="getIconClass"><i class="fa fa-shopping-cart"></i> </li>
                        <li  title="sign-in"  @click="getIconClass"><i class="fa fa-sign-in"></i> </li>
                        <li  title="sign-out"  @click="getIconClass"><i class="fa fa-sign-out"></i> </li>
                        <li  title="signal"  @click="getIconClass"><i class="fa fa-signal"></i> </li>
                        <li  title="sitemap"  @click="getIconClass"><i class="fa fa-sitemap"></i> </li>
                        <li  title="smile-o"  @click="getIconClass"><i class="fa fa-smile-o"></i> </li>
                        <li  title="sort"  @click="getIconClass"><i class="fa fa-sort"></i> </li>
                        <li  title="sort-alpha-asc"  @click="getIconClass"><i class="fa fa-sort-alpha-asc"></i> </li>
                        <li  title="sort-alpha-desc"  @click="getIconClass"><i class="fa fa-sort-alpha-desc"></i> </li>
                        <li  title="sort-amount-asc"  @click="getIconClass"><i class="fa fa-sort-amount-asc"></i> </li>
                        <li  title="sort-amount-desc"  @click="getIconClass"><i class="fa fa-sort-amount-desc"></i> </li>
                        <li  title="sort-asc"  @click="getIconClass"><i class="fa fa-sort-asc"></i> </li>
                        <li  title="sort-desc"  @click="getIconClass"><i class="fa fa-sort-desc"></i> </li>
                        <li  title="sort-down"  @click="getIconClass"><i class="fa fa-sort-down"></i> </li>
                        <li  title="sort-numeric-asc"  @click="getIconClass"><i class="fa fa-sort-numeric-asc"></i> </li>
                        <li  title="sort-numeric-desc"  @click="getIconClass"><i class="fa fa-sort-numeric-desc"></i> </li>
                        <li  title="sort-up"  @click="getIconClass"><i class="fa fa-sort-up"></i> </li>
                        <li  title="spinner"  @click="getIconClass"><i class="fa fa-spinner"></i> </li>
                        <li  title="square"  @click="getIconClass"><i class="fa fa-square"></i> </li>
                        <li  title="square-o"  @click="getIconClass"><i class="fa fa-square-o"></i> </li>
                        <li  title="star"  @click="getIconClass"><i class="fa fa-star"></i> </li>
                        <li  title="star-half"  @click="getIconClass"><i class="fa fa-star-half"></i> </li>
                        <li  title="star-half-empty"  @click="getIconClass"><i class="fa fa-star-half-empty"></i> </li>
                        <li  title="star-half-full"  @click="getIconClass"><i class="fa fa-star-half-full"></i> </li>
                        <li  title="star-half-o"  @click="getIconClass"><i class="fa fa-star-half-o"></i> </li>
                        <li  title="star-o"  @click="getIconClass"><i class="fa fa-star-o"></i> </li>
                        <li  title="subscript"  @click="getIconClass"><i class="fa fa-subscript"></i> </li>
                        <li  title="suitcase"  @click="getIconClass"><i class="fa fa-suitcase"></i> </li>
                        <li  title="sun-o"  @click="getIconClass"><i class="fa fa-sun-o"></i> </li>
                        <li  title="superscript"  @click="getIconClass"><i class="fa fa-superscript"></i> </li>
                        <li  title="tablet"  @click="getIconClass"><i class="fa fa-tablet"></i> </li>
                        <li  title="tachometer"  @click="getIconClass"><i class="fa fa-tachometer"></i> </li>
                        <li  title="tag"  @click="getIconClass"><i class="fa fa-tag"></i> </li>
                        <li  title="tags"  @click="getIconClass"><i class="fa fa-tags"></i> </li>
                        <li  title="tasks"  @click="getIconClass"><i class="fa fa-tasks"></i> </li>
                        <li  title="terminal"  @click="getIconClass"><i class="fa fa-terminal"></i> </li>
                        <li  title="thumb-tack"  @click="getIconClass"><i class="fa fa-thumb-tack"></i> </li>
                        <li  title="thumbs-down"  @click="getIconClass"><i class="fa fa-thumbs-down"></i> </li>
                        <li  title="thumbs-o-down"  @click="getIconClass"><i class="fa fa-thumbs-o-down"></i> </li>
                        <li  title="thumbs-o-up"  @click="getIconClass"><i class="fa fa-thumbs-o-up"></i> </li>
                        <li  title="thumbs-up"  @click="getIconClass"><i class="fa fa-thumbs-up"></i> </li>
                        <li  title="ticket"  @click="getIconClass"><i class="fa fa-ticket"></i> </li>
                        <li  title="times"  @click="getIconClass"><i class="fa fa-times"></i> </li>
                        <li  title="times-circle"  @click="getIconClass"><i class="fa fa-times-circle"></i> </li>
                        <li  title="times-circle-o"  @click="getIconClass"><i class="fa fa-times-circle-o"></i> </li>
                        <li  title="tint"  @click="getIconClass"><i class="fa fa-tint"></i> </li>
                        <li  title="toggle-down"  @click="getIconClass"><i class="fa fa-toggle-down"></i> </li>
                        <li  title="toggle-left"  @click="getIconClass"><i class="fa fa-toggle-left"></i> </li>
                        <li  title="toggle-right"  @click="getIconClass"><i class="fa fa-toggle-right"></i> </li>
                        <li  title="toggle-up"  @click="getIconClass"><i class="fa fa-toggle-up"></i> </li>
                        <li  title="trash-o"  @click="getIconClass"><i class="fa fa-trash-o"></i> </li>
                        <li  title="trophy"  @click="getIconClass"><i class="fa fa-trophy"></i> </li>
                        <li  title="truck"  @click="getIconClass"><i class="fa fa-truck"></i> </li>
                        <li  title="umbrella"  @click="getIconClass"><i class="fa fa-umbrella"></i> </li>
                        <li  title="unlock"  @click="getIconClass"><i class="fa fa-unlock"></i> </li>
                        <li  title="unlock-alt"  @click="getIconClass"><i class="fa fa-unlock-alt"></i> </li>
                        <li  title="unsorted"  @click="getIconClass"><i class="fa fa-unsorted"></i> </li>
                        <li  title="upload"  @click="getIconClass"><i class="fa fa-upload"></i> </li>
                        <li  title="user"  @click="getIconClass"><i class="fa fa-user"></i> </li>
                        <li  title="users"  @click="getIconClass"><i class="fa fa-users"></i> </li>
                        <li  title="video-camera"  @click="getIconClass"><i class="fa fa-video-camera"></i> </li>
                        <li  title="volume-down"  @click="getIconClass"><i class="fa fa-volume-down"></i> </li>
                        <li  title="volume-off"  @click="getIconClass"><i class="fa fa-volume-off"></i> </li>
                        <li  title="volume-up"  @click="getIconClass"><i class="fa fa-volume-up"></i> </li>
                        <li  title="warning"  @click="getIconClass"><i class="fa fa-warning"></i> </li>
                        <li  title="wheelchair"  @click="getIconClass"><i class="fa fa-wheelchair"></i> </li>
                        <li  title="wrench"  @click="getIconClass"><i class="fa fa-wrench"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5>Form Control Icons</h5>
                    <ul class="list-inline">
                        <li  title="check-square"  @click="getIconClass"><i class="fa fa-check-square"></i> </li>
                        <li  title="check-square-o"  @click="getIconClass"><i class="fa fa-check-square-o"></i> </li>
                        <li  title="circle"  @click="getIconClass"><i class="fa fa-circle"></i> </li>
                        <li  title="circle-o"  @click="getIconClass"><i class="fa fa-circle-o"></i> </li>
                        <li  title="dot-circle-o"  @click="getIconClass"><i class="fa fa-dot-circle-o"></i> </li>
                        <li  title="minus-square"  @click="getIconClass"><i class="fa fa-minus-square"></i> </li>
                        <li  title="minus-square-o"  @click="getIconClass"><i class="fa fa-minus-square-o"></i> </li>
                        <li  title="plus-square"  @click="getIconClass"><i class="fa fa-plus-square"></i> </li>
                        <li  title="plus-square-o"  @click="getIconClass"><i class="fa fa-plus-square-o"></i> </li>
                        <li  title="square"  @click="getIconClass"><i class="fa fa-square"></i> </li>
                        <li  title="square-o"  @click="getIconClass"><i class="fa fa-square-o"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5>货币图标</h5>
                    <ul class="list-inline">
                        <li  title="bitcoin"  @click="getIconClass"><i class="fa fa-bitcoin"></i> </li>
                        <li  title="btc"  @click="getIconClass"><i class="fa fa-btc"></i> </li>
                        <li  title="cny"  @click="getIconClass"><i class="fa fa-cny"></i> </li>
                        <li  title="dollar"  @click="getIconClass"><i class="fa fa-dollar"></i> </li>
                        <li  title="eur"  @click="getIconClass"><i class="fa fa-eur"></i> </li>
                        <li  title="euro"  @click="getIconClass"><i class="fa fa-euro"></i> </li>
                        <li  title="gbp"  @click="getIconClass"><i class="fa fa-gbp"></i> </li>
                        <li  title="inr"  @click="getIconClass"><i class="fa fa-inr"></i> </li>
                        <li  title="jpy"  @click="getIconClass"><i class="fa fa-jpy"></i> </li>
                        <li  title="krw"  @click="getIconClass"><i class="fa fa-krw"></i> </li>
                        <li  title="money"  @click="getIconClass"><i class="fa fa-money"></i> </li>
                        <li  title="rmb"  @click="getIconClass"><i class="fa fa-rmb"></i> </li>
                        <li  title="rouble"  @click="getIconClass"><i class="fa fa-rouble"></i> </li>
                        <li  title="rub"  @click="getIconClass"><i class="fa fa-rub"></i> </li>
                        <li  title="ruble"  @click="getIconClass"><i class="fa fa-ruble"></i> </li>
                        <li  title="rupee"  @click="getIconClass"><i class="fa fa-rupee"></i> </li>
                        <li  title="try"  @click="getIconClass"><i class="fa fa-try"></i> </li>
                        <li  title="turkish-lira"  @click="getIconClass"><i class="fa fa-turkish-lira"></i> </li>
                        <li  title="usd"  @click="getIconClass"><i class="fa fa-usd"></i> </li>
                        <li  title="won"  @click="getIconClass"><i class="fa fa-won"></i> </li>
                        <li  title="yen"  @click="getIconClass"><i class="fa fa-yen"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5>文本编辑器图标</h5>
                    <ul class="list-inline">
                        <li  title="align-center"  @click="getIconClass"><i class="fa fa-align-center"></i> </li>
                        <li  title="align-justify"  @click="getIconClass"><i class="fa fa-align-justify"></i> </li>
                        <li  title="align-left"  @click="getIconClass"><i class="fa fa-align-left"></i> </li>
                        <li  title="align-right"  @click="getIconClass"><i class="fa fa-align-right"></i> </li>
                        <li  title="bold"  @click="getIconClass"><i class="fa fa-bold"></i> </li>
                        <li  title="chain"  @click="getIconClass"><i class="fa fa-chain"></i> </li>
                        <li  title="chain-broken"  @click="getIconClass"><i class="fa fa-chain-broken"></i> </li>
                        <li  title="clipboard"  @click="getIconClass"><i class="fa fa-clipboard"></i> </li>
                        <li  title="columns"  @click="getIconClass"><i class="fa fa-columns"></i> </li>
                        <li  title="copy"  @click="getIconClass"><i class="fa fa-copy"></i> </li>
                        <li  title="cut"  @click="getIconClass"><i class="fa fa-cut"></i> </li>
                        <li  title="dedent"  @click="getIconClass"><i class="fa fa-dedent"></i> </li>
                        <li  title="eraser"  @click="getIconClass"><i class="fa fa-eraser"></i> </li>
                        <li  title="file"  @click="getIconClass"><i class="fa fa-file"></i> </li>
                        <li  title="file-o"  @click="getIconClass"><i class="fa fa-file-o"></i> </li>
                        <li  title="file-text"  @click="getIconClass"><i class="fa fa-file-text"></i> </li>
                        <li  title="file-text-o"  @click="getIconClass"><i class="fa fa-file-text-o"></i> </li>
                        <li  title="files-o"  @click="getIconClass"><i class="fa fa-files-o"></i> </li>
                        <li  title="floppy-o"  @click="getIconClass"><i class="fa fa-floppy-o"></i> </li>
                        <li  title="font"  @click="getIconClass"><i class="fa fa-font"></i> </li>
                        <li  title="indent"  @click="getIconClass"><i class="fa fa-indent"></i> </li>
                        <li  title="italic"  @click="getIconClass"><i class="fa fa-italic"></i> </li>
                        <li  title="link"  @click="getIconClass"><i class="fa fa-link"></i> </li>
                        <li  title="list"  @click="getIconClass"><i class="fa fa-list"></i> </li>
                        <li  title="list-alt"  @click="getIconClass"><i class="fa fa-list-alt"></i> </li>
                        <li  title="list-ol"  @click="getIconClass"><i class="fa fa-list-ol"></i> </li>
                        <li  title="list-ul"  @click="getIconClass"><i class="fa fa-list-ul"></i> </li>
                        <li  title="outdent"  @click="getIconClass"><i class="fa fa-outdent"></i> </li>
                        <li  title="paperclip"  @click="getIconClass"><i class="fa fa-paperclip"></i> </li>
                        <li  title="paste"  @click="getIconClass"><i class="fa fa-paste"></i> </li>
                        <li  title="repeat"  @click="getIconClass"><i class="fa fa-repeat"></i> </li>
                        <li  title="rotate-left"  @click="getIconClass"><i class="fa fa-rotate-left"></i> </li>
                        <li  title="rotate-right"  @click="getIconClass"><i class="fa fa-rotate-right"></i> </li>
                        <li  title="save"  @click="getIconClass"><i class="fa fa-save"></i> </li>
                        <li  title="scissors"  @click="getIconClass"><i class="fa fa-scissors"></i> </li>
                        <li  title="strikethrough"  @click="getIconClass"><i class="fa fa-strikethrough"></i> </li>
                        <li  title="table"  @click="getIconClass"><i class="fa fa-table"></i> </li>
                        <li  title="text-height"  @click="getIconClass"><i class="fa fa-text-height"></i> </li>
                        <li  title="text-width"  @click="getIconClass"><i class="fa fa-text-width"></i> </li>
                        <li  title="th"  @click="getIconClass"><i class="fa fa-th"></i> </li>
                        <li  title="th-large"  @click="getIconClass"><i class="fa fa-th-large"></i> </li>
                        <li  title="th-list"  @click="getIconClass"><i class="fa fa-th-list"></i> </li>
                        <li  title="underline"  @click="getIconClass"><i class="fa fa-underline"></i> </li>
                        <li  title="undo"  @click="getIconClass"><i class="fa fa-undo"></i> </li>
                        <li  title="unlink"  @click="getIconClass"><i class="fa fa-unlink"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5>方向图标</h5>
                    <ul class="list-inline">
                        <li  title="angle-double-down"  @click="getIconClass"><i class="fa fa-angle-double-down"></i> </li>
                        <li  title="angle-double-left"  @click="getIconClass"><i class="fa fa-angle-double-left"></i> </li>
                        <li  title="angle-double-right"  @click="getIconClass"><i class="fa fa-angle-double-right"></i> </li>
                        <li  title="angle-double-up"  @click="getIconClass"><i class="fa fa-angle-double-up"></i> </li>
                        <li  title="angle-down"  @click="getIconClass"><i class="fa fa-angle-down"></i> </li>
                        <li  title="angle-left"  @click="getIconClass"><i class="fa fa-angle-left"></i> </li>
                        <li  title="angle-right"  @click="getIconClass"><i class="fa fa-angle-right"></i> </li>
                        <li  title="angle-up"  @click="getIconClass"><i class="fa fa-angle-up"></i> </li>
                        <li  title="arrow-circle-down"  @click="getIconClass"><i class="fa fa-arrow-circle-down"></i> </li>
                        <li  title="arrow-circle-left"  @click="getIconClass"><i class="fa fa-arrow-circle-left"></i> </li>
                        <li  title="arrow-circle-o-down"  @click="getIconClass"><i class="fa fa-arrow-circle-o-down"></i> </li>
                        <li  title="arrow-circle-o-left"  @click="getIconClass"><i class="fa fa-arrow-circle-o-left"></i> </li>
                        <li  title="arrow-circle-o-right"  @click="getIconClass"><i class="fa fa-arrow-circle-o-right"></i> </li>
                        <li  title="arrow-circle-o-up"  @click="getIconClass"><i class="fa fa-arrow-circle-o-up"></i> </li>
                        <li  title="arrow-circle-right"  @click="getIconClass"><i class="fa fa-arrow-circle-right"></i> </li>
                        <li  title="arrow-circle-up"  @click="getIconClass"><i class="fa fa-arrow-circle-up"></i> </li>
                        <li  title="arrow-down"  @click="getIconClass"><i class="fa fa-arrow-down"></i> </li>
                        <li  title="arrow-left"  @click="getIconClass"><i class="fa fa-arrow-left"></i> </li>
                        <li  title="arrow-right"  @click="getIconClass"><i class="fa fa-arrow-right"></i> </li>
                        <li  title="arrow-up"  @click="getIconClass"><i class="fa fa-arrow-up"></i> </li>
                        <li  title="arrows"  @click="getIconClass"><i class="fa fa-arrows"></i> </li>
                        <li  title="arrows-alt"  @click="getIconClass"><i class="fa fa-arrows-alt"></i> </li>
                        <li  title="arrows-h"  @click="getIconClass"><i class="fa fa-arrows-h"></i> </li>
                        <li  title="arrows-v"  @click="getIconClass"><i class="fa fa-arrows-v"></i> </li>
                        <li  title="caret-down"  @click="getIconClass"><i class="fa fa-caret-down"></i> </li>
                        <li  title="caret-left"  @click="getIconClass"><i class="fa fa-caret-left"></i> </li>
                        <li  title="caret-right"  @click="getIconClass"><i class="fa fa-caret-right"></i> </li>
                        <li  title="caret-square-o-down"  @click="getIconClass"><i class="fa fa-caret-square-o-down"></i> </li>
                        <li  title="caret-square-o-left"  @click="getIconClass"><i class="fa fa-caret-square-o-left"></i> </li>
                        <li  title="caret-square-o-right"  @click="getIconClass"><i class="fa fa-caret-square-o-right"></i> </li>
                        <li  title="caret-square-o-up"  @click="getIconClass"><i class="fa fa-caret-square-o-up"></i> </li>
                        <li  title="caret-up"  @click="getIconClass"><i class="fa fa-caret-up"></i> </li>
                        <li  title="chevron-circle-down"  @click="getIconClass"><i class="fa fa-chevron-circle-down"></i> </li>
                        <li  title="chevron-circle-left"  @click="getIconClass"><i class="fa fa-chevron-circle-left"></i> </li>
                        <li  title="chevron-circle-right"  @click="getIconClass"><i class="fa fa-chevron-circle-right"></i> </li>
                        <li  title="chevron-circle-up"  @click="getIconClass"><i class="fa fa-chevron-circle-up"></i> </li>
                        <li  title="chevron-down"  @click="getIconClass"><i class="fa fa-chevron-down"></i> </li>
                        <li  title="chevron-left"  @click="getIconClass"><i class="fa fa-chevron-left"></i> </li>
                        <li  title="chevron-right"  @click="getIconClass"><i class="fa fa-chevron-right"></i> </li>
                        <li  title="chevron-up"  @click="getIconClass"><i class="fa fa-chevron-up"></i> </li>
                        <li  title="hand-o-down"  @click="getIconClass"><i class="fa fa-hand-o-down"></i> </li>
                        <li  title="hand-o-left"  @click="getIconClass"><i class="fa fa-hand-o-left"></i> </li>
                        <li  title="hand-o-right"  @click="getIconClass"><i class="fa fa-hand-o-right"></i> </li>
                        <li  title="hand-o-up"  @click="getIconClass"><i class="fa fa-hand-o-up"></i> </li>
                        <li  title="long-arrow-down"  @click="getIconClass"><i class="fa fa-long-arrow-down"></i> </li>
                        <li  title="long-arrow-left"  @click="getIconClass"><i class="fa fa-long-arrow-left"></i> </li>
                        <li  title="long-arrow-right"  @click="getIconClass"><i class="fa fa-long-arrow-right"></i> </li>
                        <li  title="long-arrow-up"  @click="getIconClass"><i class="fa fa-long-arrow-up"></i> </li>
                        <li  title="toggle-down"  @click="getIconClass"><i class="fa fa-toggle-down"></i> </li>
                        <li  title="toggle-left"  @click="getIconClass"><i class="fa fa-toggle-left"></i> </li>
                        <li  title="toggle-right"  @click="getIconClass"><i class="fa fa-toggle-right"></i> </li>
                        <li  title="toggle-up"  @click="getIconClass"><i class="fa fa-toggle-up"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5>视频播放器图标</h5>
                    <ul class="list-inline">
                        <li  title="arrows-alt"  @click="getIconClass"><i class="fa fa-arrows-alt"></i> </li>
                        <li  title="backward"  @click="getIconClass"><i class="fa fa-backward"></i> </li>
                        <li  title="compress"  @click="getIconClass"><i class="fa fa-compress"></i> </li>
                        <li  title="eject"  @click="getIconClass"><i class="fa fa-eject"></i> </li>
                        <li  title="expand"  @click="getIconClass"><i class="fa fa-expand"></i> </li>
                        <li  title="fast-backward"  @click="getIconClass"><i class="fa fa-fast-backward"></i> </li>
                        <li  title="fast-forward"  @click="getIconClass"><i class="fa fa-fast-forward"></i> </li>
                        <li  title="forward"  @click="getIconClass"><i class="fa fa-forward"></i> </li>
                        <li  title="pause"  @click="getIconClass"><i class="fa fa-pause"></i> </li>
                        <li  title="play"  @click="getIconClass"><i class="fa fa-play"></i> </li>
                        <li  title="play-circle"  @click="getIconClass"><i class="fa fa-play-circle"></i> </li>
                        <li  title="play-circle-o"  @click="getIconClass"><i class="fa fa-play-circle-o"></i> </li>
                        <li  title="step-backward"  @click="getIconClass"><i class="fa fa-step-backward"></i> </li>
                        <li  title="step-forward"  @click="getIconClass"><i class="fa fa-step-forward"></i> </li>
                        <li  title="stop"  @click="getIconClass"><i class="fa fa-stop"></i> </li>
                        <li  title="youtube-play"  @click="getIconClass"><i class="fa fa-youtube-play"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5>品牌图标</h5>
                    <ul class="list-inline">
                        <li  title="adn"  @click="getIconClass"><i class="fa fa-adn"></i> </li>
                        <li  title="android"  @click="getIconClass"><i class="fa fa-android"></i> </li>
                        <li  title="apple"  @click="getIconClass"><i class="fa fa-apple"></i> </li>
                        <li  title="bitbucket"  @click="getIconClass"><i class="fa fa-bitbucket"></i> </li>
                        <li  title="bitbucket-square"  @click="getIconClass"><i class="fa fa-bitbucket-square"></i> </li>
                        <li  title="bitcoin"  @click="getIconClass"><i class="fa fa-bitcoin"></i> </li>
                        <li  title="btc"  @click="getIconClass"><i class="fa fa-btc"></i> </li>
                        <li  title="css3"  @click="getIconClass"><i class="fa fa-css3"></i> </li>
                        <li  title="dribbble"  @click="getIconClass"><i class="fa fa-dribbble"></i> </li>
                        <li  title="dropbox"  @click="getIconClass"><i class="fa fa-dropbox"></i> </li>
                        <li  title="facebook"  @click="getIconClass"><i class="fa fa-facebook"></i> </li>
                        <li  title="facebook-square"  @click="getIconClass"><i class="fa fa-facebook-square"></i> </li>
                        <li  title="flickr"  @click="getIconClass"><i class="fa fa-flickr"></i> </li>
                        <li  title="foursquare"  @click="getIconClass"><i class="fa fa-foursquare"></i> </li>
                        <li  title="github"  @click="getIconClass"><i class="fa fa-github"></i> </li>
                        <li  title="github-alt"  @click="getIconClass"><i class="fa fa-github-alt"></i> </li>
                        <li  title="github-square"  @click="getIconClass"><i class="fa fa-github-square"></i> </li>
                        <li  title="gittip"  @click="getIconClass"><i class="fa fa-gittip"></i> </li>
                        <li  title="google-plus"  @click="getIconClass"><i class="fa fa-google-plus"></i> </li>
                        <li  title="google-plus-square"  @click="getIconClass"><i class="fa fa-google-plus-square"></i> </li>
                        <li  title="html5"  @click="getIconClass"><i class="fa fa-html5"></i> </li>
                        <li  title="instagram"  @click="getIconClass"><i class="fa fa-instagram"></i> </li>
                        <li  title="linkedin"  @click="getIconClass"><i class="fa fa-linkedin"></i> </li>
                        <li  title="linkedin-square"  @click="getIconClass"><i class="fa fa-linkedin-square"></i> </li>
                        <li  title="linux"  @click="getIconClass"><i class="fa fa-linux"></i> </li>
                        <li  title="maxcdn"  @click="getIconClass"><i class="fa fa-maxcdn"></i> </li>
                        <li  title="pagelines"  @click="getIconClass"><i class="fa fa-pagelines"></i> </li>
                        <li  title="pinterest"  @click="getIconClass"><i class="fa fa-pinterest"></i> </li>
                        <li  title="pinterest-square"  @click="getIconClass"><i class="fa fa-pinterest-square"></i> </li>
                        <li  title="renren"  @click="getIconClass"><i class="fa fa-renren"></i> </li>
                        <li  title="skype"  @click="getIconClass"><i class="fa fa-skype"></i> </li>
                        <li  title="stack-exchange"  @click="getIconClass"><i class="fa fa-stack-exchange"></i> </li>
                        <li  title="stack-overflow"  @click="getIconClass"><i class="fa fa-stack-overflow"></i> </li>
                        <li  title="trello"  @click="getIconClass"><i class="fa fa-trello"></i> </li>
                        <li  title="tumblr"  @click="getIconClass"><i class="fa fa-tumblr"></i> </li>
                        <li  title="tumblr-square"  @click="getIconClass"><i class="fa fa-tumblr-square"></i> </li>
                        <li  title="twitter"  @click="getIconClass"><i class="fa fa-twitter"></i> </li>
                        <li  title="twitter-square"  @click="getIconClass"><i class="fa fa-twitter-square"></i> </li>
                        <li  title="vimeo-square"  @click="getIconClass"><i class="fa fa-vimeo-square"></i> </li>
                        <li  title="vk"  @click="getIconClass"><i class="fa fa-vk"></i> </li>
                        <li  title="weibo"  @click="getIconClass"><i class="fa fa-weibo"></i> </li>
                        <li  title="windows"  @click="getIconClass"><i class="fa fa-windows"></i> </li>
                        <li  title="xing"  @click="getIconClass"><i class="fa fa-xing"></i> </li>
                        <li  title="xing-square"  @click="getIconClass"><i class="fa fa-xing-square"></i> </li>
                        <li  title="youtube"  @click="getIconClass"><i class="fa fa-youtube"></i> </li>
                        <li  title="youtube-play"  @click="getIconClass"><i class="fa fa-youtube-play"></i> </li>
                        <li  title="youtube-square"  @click="getIconClass"><i class="fa fa-youtube-square"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
                <div>
                    <h5>医疗图标</h5>
                    <ul class="list-inline">
                        <li  title="ambulance"  @click="getIconClass"><i class="fa fa-ambulance"></i> </li>
                        <li  title="h-square"  @click="getIconClass"><i class="fa fa-h-square"></i> </li>
                        <li  title="hospital-o"  @click="getIconClass"><i class="fa fa-hospital-o"></i> </li>
                        <li  title="medkit"  @click="getIconClass"><i class="fa fa-medkit"></i> </li>
                        <li  title="plus-square"  @click="getIconClass"><i class="fa fa-plus-square"></i> </li>
                        <li  title="stethoscope"  @click="getIconClass"><i class="fa fa-stethoscope"></i> </li>
                        <li  title="user-md"  @click="getIconClass"><i class="fa fa-user-md"></i> </li>
                        <li  title="wheelchair"  @click="getIconClass"><i class="fa fa-wheelchair"></i> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
            </template>
        </el-dialog>
    </el-dialog>
</div>
{/block}
{block name="script"}
<script>
    var menus = <?=isset($menus) ? json_encode($menus) : "[]"?>;
    var my = new Vue({
        el: "#myApp",
        data() {
            return{
                innerVisible: false,
                dialogFormVisible: false,
                formData:{
                    id:0,
                    menu_name: '',
                    pid: '',
                    module: '',
                    controller: '',
                    action: '',
                    params: '',
                    icon: '',
                    sort: '',
                    is_show: 1
                },
                rules:{
                    menu_name: [
                        { required: true, message: '按钮名称不能为空', trigger: 'blur' },
                    ]
                },
                rowsCount: 0,
                rows: [],
                where:{
                    page:1,
                    limit: pageSize,
                    is_show: '',
                    keyword: '',
                },
                menus: menus,
                iconSearchKeyword:''
            }
        },
        methods: {
            doLoadRows (pn) {
                this.where.page = pn || 1
                axios.get(Url({a:'get_list' , q:this.where})).then(res => {
                    this.rows = res.data.data
                    this.rowsCount = res.data.count
                })
            }
            ,getIcon(){
                this.innerVisible = true;
            }
            ,getIconClass(event){
                // let clickDom = event.currentTarget.firstElementChild;  // currentTarget 获取绑定点击事件的节点
                // let className = clickDom.className;
                // var font = className.replace('fa fa-','');
                this.formData.icon = event.currentTarget.title;
                this.innerVisible = false;
            }
            // 编辑
            ,doAdd ( item ) {
                if ( item != undefined ) {
                    axios.get(Url({a:'getInfo' , q:{id:item.id}})).then(res => {
                        var paramStr = '';
                        $.each(res.data.params,function(i,item){
                            paramStr += i + '/'+item + '/';
                        });
                        res.data.params = paramStr;
                        this.formData = res.data;

                    })

                } else {
                    this.formData = {
                        id:0,
                        menu_name: '',
                        pid: '',
                        module: 'admin',
                        controller: '',
                        action: '',
                        params: '',
                        icon: '',
                        sort: '',
                        is_show: 1
                    }
                }
                this.dialogFormVisible = true
            }
            ,onSubmit (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post( Url({a:'save'}) , this.formData)
                            .then(res => {
                                if(res.data.code == 200){
                                    this.$message({
                                        message:'操作成功',
                                        type:'success',
                                        duration:1500
                                    });
                                }else{
                                    this.$message({
                                        message:res.data.msg,
                                        type:'error',
                                        duration:1500
                                    });
                                }

                                this.dialogFormVisible = false;
                                this.doLoadRows(1)
                            }).catch(_ => {
                            this.$message({
                                message: '操作失败',
                                type: 'error'
                            })
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
            ,doDelete (id) {
                this.$confirm('确认删除该条记录?').then(_ => {
                    axios.get(Url({a:'delete' , q:{id:id}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    })

                    return this.doLoadRows();
                }).catch(_ => {})
            }
            // 关闭
            ,closeDialog () {
                this.$refs['formData'].clearValidate();
            }
        },
        mounted(){
            this.doLoadRows()
        }
    })
</script>
{/block}